<template>
	<div style="display: flex;justify-content: space-between">
		<h2>班级管理</h2>
		<h2><button @click="go2add()">添加班级</button></h2>
	</div>
	<div style="display: flex">
		<div style="width: 67%;border: blue 1px solid">
			<h2 style="text-align: center">班级显示</h2>
			<table border="1" style="width: 100%">
				<tr>
					<th>班级编号</th>
					<th>班级名称</th>
					<th>操作</th>
				</tr>
				<!-- //点击某条就调用去更新方法并高亮 -->
				<tr v-for="x, idx in clzs" @click="go2update(x)" :class="{ c: clz.clzno == x.clzno }">
					<th>{{ x.clzno }}</th>
					<th>{{ x.clzname }}</th>
					<th><button @click="del(x.clzno)">删除</button></th>
				</tr>
			</table>
			{{ dodel }}
		</div>
		<div style="width: 32%; border: green 1px solid">
			班级编号：<input type="text" v-model="clz.clzno" v-show="actidx == 1">
			<input type="text" v-model="clz.clzno" v-show="actidx == 0" readonly><br>
			<!-- 显示班级编号 -->
			<hr>
			班级名称：<input type="text" v-model="clz.clzname"><br>
			<!-- 显示班级名称 -->
			<hr>
			<button @click="addupdate()">添加/修改</button>
			<!-- 通过actidx来判断是添加还是修改 -->
		</div>
	</div>
</template>
<script>
export default {//添加数据
	name: 'clz',
	data() {
		return {
			clzs: [],//定义班级数组
			clz: {},//定义修改或添加函数
			actidx: 0,//定义添加修改属性（1是添加，0是修改）
			token: "",//token的值
			dodel: ""//删除提示
		}

	},
	methods: {
		
		go2add() {//添加
			this.clz = { clzno: '', clzname: '' }//初始化函数
			this.actidx = 1//将属性改为添加
		},
		del(clzno) {//删除
			var that = this;
			this.$axios.get(this.$ip + "/api/adm/clz/del?clzno=" + clzno, { headers: { 'Authorization': that.token } })
				.then(function (resp) {
					that.clzs = resp.data.data
					that.dodel = resp.data.msg
					console.log(resp.data)
				})
		},
		addupdate() {//添加修改
			if (this.clz.clzno == undefined || this.clz.clzname == undefined) {
				alert("添加不允许为空")
				return;
			}
			var that = this;//获取数据
			var fd = new FormData()//创建formdata对象来传输数据
			fd.append("clzno", this.clz.clzno)//添加数据
			fd.append("clzname", this.clz.clzname)
			var p = ""//判断是添加还是修改，如果actidx=1添加，actidx=0修改
			if (that.actidx > 0) p = this.$ip + "/api/adm/clz/add"
			if (that.actidx == 0) p = this.$ip + "/api/adm/clz/update"
			this.$axios.post(p, fd, { headers: { 'Authorization': that.token } })
				.then(function (resp) {
					that.clzs = resp.data.data//显示数据
					that.dodel = resp.data.msg//显示提示
					console.log(resp.data.data)
				})
		},
		go2update(clz) {//去修改
			this.actidx = 0//属性改为修改
			var that = this;
			this.$axios.get(this.$ip + "/api/adm/clz/findOne/" + clz.clzno, { headers: { 'Authorization': that.token } })
				.then(function (resp) {
					that.clz = resp.data.data
					console.log(resp.data.data)
				})
		}
	},
	mounted() {//获取数据
		this.token = window.localStorage.getItem("token")//通过localStorage来获取token
		console.log(this.token)//打印
		var that = this;//获取数据
		this.$axios.get(this.$ip + "/api/public/getClzs")
			.then(function (resp) {//这个是获取数据的
				console.log("111");
				that.clzs = resp.data.data
				console.log(resp.data.data)
			})
	}
}

</script>

<style>
/* //设置高亮 */
.c {
	color: red;
	background: rgb(0, 224, 224);
}
</style>
